<template>
  <div>
    <div>医生: {{ doctorInfo.doctor }} 科别: {{ doctorInfo.department }}
     医疗证: {{ doctorInfo.doctor_licence }} 时间: {{ currentTime }}</div>
    <table class="addDrug" style="width: 750px;">
      <tr>
        <td style="width: 80px;">姓名:</td>
        <td style="width: 120px;">
          <el-autocomplete
            class="my-autocomplete"
            custom-item="my-item-zh"
            v-model="name"
            size="small"
            :fetch-suggestions="querySearchPartner"
            placeholder="患者搜索"
            :trigger-on-focus="false"
            @select="handleSelectPartner">
          </el-autocomplete>
        </td>
        <td style="width: 60px">性别:</td>
        <td style="width: 80px">
          <div v-if="basicInfo.sex == 'm'">男</div>
          <div v-if="basicInfo.sex == 'w'">女</div>
        </td>
        <td style="width: 80px">年龄:</td><td style="width: 80px">{{ basicInfo.age }}</td>
        <td style="width: 80px">出生日期:</td><td style="width: 100px">{{ basicInfo.birthday }}</td>
      </tr>
      <tr>
        <td>联系电话:</td><td>{{ basicInfo.phone }}</td>
        <td>地址:</td><td colspan=2>{{ basicInfo.street }}</td>
        <td>过敏史:</td><td colspan=2>{{ basicInfo.allergic_note }}</td>
      </tr>
    </table>
    <div>
      <el-tabs type="border-card" style="width:100%;">
        <el-tab-pane label="候诊">候诊</el-tab-pane>
        <el-tab-pane label="病历">
          <medical-history :basic-info="basicInfo" :doctor-info="doctorInfo" :current-time="currentTime">
          </medical-history>
        </el-tab-pane>
        <el-tab-pane label="处方">
          <work-prescription
            :basic-info="basicInfo"
            :doctor-info="doctorInfo"
            :current-time="currentTime"
            :allergics="allergics">
          </work-prescription>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import '../../assets/scripts/TimeFormat.js'
import '../../assets/scripts/myItems.js'
import medicalHistory from './medicalHistory.vue'
import WorkPrescription from './WorkPrescription.vue'
export default {
  data() {
    return {
      doctorInfo: {
        doctor: '',
        department: '',
        doctor_licence: ''
      },
      name: '',
      basicInfo: {
        partner_id: 0,
        partner_name: '',
        sex: '',
        age: '',
        birthday: '',
        phone: '',
        street: '',
        allergic_note: '',
      },
      currentTime: '',
      dateTime: 0,
      allergics: [{ key: 2, drug_id: 1, drug_allergic: '无' }]
    }
  },
  components: {
    medicalHistory,
    WorkPrescription
  },
  methods: {
    querySearchPartner(queryString, funcd) {
      let vm = this
      if (queryString == '') {
        funcd()
      } else {
        vm.$http.get('/api/patients/code/'+queryString+'/1').then(function (response) {
          let reply = response.data.data
          let items = reply.map(function(obj) {
            return { 'value': obj.base.name, 'id': obj.base.id, 'annotation': '年龄：' + obj.base.age }
          })
          funcd(items)
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      }    
    },
    handleSelectPartner(item) {
      let vm = this
      vm.$http.get('/api/patients/'+item.id).then(function (response) {
        let reply = response.data
        vm.basicInfo = Object.assign({},reply.base)
        vm.basicInfo.id = 0
        vm.basicInfo.partner_id = reply.base.id
        vm.basicInfo.partner_name = reply.base.name
        vm.basicInfo.allergic_note = reply.allergic.map(function(obj) {
          return obj.drug_allergic
        }).join(', ')
        vm.allergics = reply.allergic.map(function(obj) {
          return { key: obj.key, drug_id: obj.drug_id, drug_allergic: obj.drug_allergic }
        })
      })
    },
    timing() {
      let vm = this
      vm.dateTime+=1000
      let date = new Date(vm.dateTime)
      vm.currentTime = date.Format("yyyy-MM-dd hh:mm:ss")
      setTimeout(() => {
        vm.timing()
      },1000)
    }
  },
  mounted() {
    let vm = this
    vm.$http.get('api/patients/doctor').then(function (response) {
      vm.doctorInfo = response.data
      vm.dateTime = Date.parse(response.headers.map.date[0]) 
      vm.timing()
    })
  }
}
</script>

<style>
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.my-autocomplete .value {
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-autocomplete .annotation {
  font-size: 12px;
  color: #b4b4b4;
}
</style>